<template>

	<view class="leave-box">
		<uni-collapse v-for="(item,index) in List" :key="index">
			<uni-collapse-item class="biaoticolor" :title="item.mont">
				<view class="leave-content" v-for="(stu,i) in item.stuArr" :key="i" @click="leaveDetail(stu.leave_id)">
					<view class="leave-content-left">
						<view class="leave-content-left-top" v-if="stu">
							<view class="leave-content-name" v-if="stu">{{stu.name}}</view>
							<view class="leave-content-classnumber" v-if="stu">学号：{{stu.sno}}</view>
						</view>
						<view class="leave-content-left-top" v-if="stu">
							<view class="leave-content-classnumber" v-if="stu">班级：{{stu.class_name}}</view>
						</view>
						<view class="leave-content-time">
							<view class="leave-tiem" v-if="stu">请假时间：（总时长{{stu.hours}}小时）</view>
							<view class="leave-date" v-if="stu">{{stu.begintime?stu.begintime.substring(0,16):''}} 至 
																									 {{stu.endtime?stu.endtime.substring(0,16):''}}</view>
						</view>
					</view>
					<view class="leave-content-right">
						<!-- <view class="leave-content-classnumber" v-if="stu">班级：{{stu.class_name}}</view> -->
						<button class="button_status" style="color: #77312A;">{{stu.status}}</button>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>

	</view>
</template>

<script>
	export default {
		props:['banji'],
		data() {
			return {
				//月份列表
				List: [],

				titlen: '2022年6月',
				time: '7'
			}

		},
		mounted() {
			let arr = []
			// 请求接口 ↓↓↓
			//教师端查询学生请假月份(统计)
			uni.request({
				// url: "/api/appteacher/getMonthOfTeacher",
				url: this.baseUrl+ "/appteacher/getMonthOfTeacher?satoken="+uni.getStorageSync('satoken'),
				headers: {
					// "token": localStorage.getItem("token")
				},
				method: "POST",
				success: (res) => {
					res.data.result.forEach((v, i) => {
						arr.push(
							new Promise((resolve, reject) => {
								uni.request({
									// url: "/api/appteacher/getLeaveList",
									url: this.baseUrl+ "/appteacher/getLeaveList?satoken="+uni.getStorageSync('satoken'),
									method: "POST",
									headers: {
										// "token": localStorage.getItem("token")
									},
									data: {
										create_time: v.mont,
										class_id: this.banji
									},
									success: (r) => {
										v.stuArr = r.data.list;
										resolve(v)
									}
								})
							})
						)
					})
			
					Promise.all(arr).then(res => {
						this.List = res
					})
				}
			})

		},
		methods: {
			// 点击学生信息，查看请假详情
			leaveDetail(id){
				uni.navigateTo({
					url: '/pages/qingjiazhongDetails/qingjiazhongDetails?id='+id
				});
				
			}

		}

	}
</script>

<style lang="scss">
	@import url(@/static/common.css);
	.leaveapply_box{padding: 0;}
	/* .tongji-box {
		width: 100%;
		overflow: hidden;
		box-sizing: border-box;

		.neirong {
			width: 95%;
			margin: 0 auto;
			display: flex;
			overflow: hidden;
			box-sizing: border-box;
			flex-direction: column;
			padding: 10rpx 0;
			border-bottom: 1rpx solid #999999;

			.neirong-top {
				display: flex;
				width: 100%;
				overflow: hidden;
				box-sizing: border-box;
				flex-direction: row;

				.xingming {
					flex: 3;

				}

				.xuehao {
					flex: 7;
				}

				.banji {
					flex: 7;
					text-align: right;
				}

			}

			.neirong-bottom {
				display: flex;
				width: 100%;
				overflow: hidden;
				box-sizing: border-box;
				flex-direction: row;
				margin-top: 10rpx;

				.neirong-bottom-left {
					flex: 3;
					overflow: hidden;
					box-sizing: border-box;
					flex-direction: column;
					justify-content: center;

					.shichang {
						flex: 1;
					}

					.shijian {
						flex: 1;
						letter-spacing: 1rpx;
						margin-top: 10rpx;


					}
				}

				.neirong-bottom-right {
					flex: 1;
					overflow: hidden;
					box-sizing: border-box;
					// justify-content: center;
					align-items: center;

					.zhuangtai {
						width: 80%;
						padding: 20rpx 0;
						text-align: center;
						// background-color: #f5f5f5;
					}
				}

			}
		}

		.neirong:last-child {
			border: none;
		}

		.biaoticolor {
			/deep/ .uni-collapse-item__title-box {
				background-color: #f5f5f5;
			}

			/deep/ .uni-collapse-item__title {
				background-color: #f5f5f5;
			}

			/deep/ .uni-collapse-item__title-text {
				color: #444444;
				font-size: 36rpx;
			}

		}


	}

	.tongji-box {
		/dedp/ .uni-collapse-item__wrap-content .uni-collapse-item--border {
			border-bottom: none;
		}
	} */
</style>
